<template>
    <!-- 添加按钮 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <el-button @click="router.push(`/pms/addProductAttr?cid=${route.query.cid}&type=${route.query.type}`)">添加
        </el-button>
    </div>
    <!-- table表格部分 -->
    <el-table :data="tableData" border cell-class-name="center" @select="delFn1" @select-all="delFn2">
        <el-table-column type="selection" width="55" show-overflow-tooltip/>
        <el-table-column class-name="center" prop="id" label="编号"> </el-table-column>
        <el-table-column class-name="center" prop="name" label="属性名称"> </el-table-column>
        <el-table-column class-name="center" label="商品类型">{{ route.query.cname }} </el-table-column>
        <el-table-column class-name="center" prop="selectType" label="属性是否可选">
            <template #default="scope">
                {{ fomatselectType(scope.row.selectType) }}
            </template>
        </el-table-column>
        <el-table-column class-name="center" prop="inputType" label="属性录入方式">
            <template #default="scope">
                {{ fomatinputType(scope.row.inputType) }}
            </template>
        </el-table-column>
        <el-table-column class-name="center" prop="inputList" label="可选值列表"> </el-table-column>
        <el-table-column class-name="center" prop="sort" label="排序"> </el-table-column>
        <el-table-column class-name="center" label="操作">
            <template #default="scope">
                <el-button @click="router.push(`/pms/addProductAttr?id=${scope.row.id}`)">
                    编辑
                </el-button>
                <el-button type="danger" @click="delFn(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>>
    </el-table>

    <!--  批量删除 -->
    <div class="left">
        <el-select v-model="delval" class="m-2" placeholder="批量操作" size="large" placement="top">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button type="primary" @click="delsFn">确定</el-button>
    </div>
    <!-- 分页器 -->
    <ElConfigProvider :locale="zhCn">
        <el-pagination v-model:currentPage="listParams.pageNum" v-model:page-size="listParams.pageSize" background
            layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChagne"
            @current-change="currentChagne" :page-sizes="[5, 10, 15]" />
    </ElConfigProvider>
</template>

<script setup lang="ts">
import { user } from "@/api";
import { reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { fomatinputType, fomatselectType } from "@/utils"
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage, ElMessageBox } from "element-plus";
import { Tickets } from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const cid = route.query.cid
interface IState {
    tableData: AttrListModel[];
    listParams: getButeList;
    total: number
}
const state = reactive<IState>({
    tableData: [],
    listParams: {
        pageNum: 1,
        pageSize: 5,
        type: route.query.type
    },
    total: 0
})
const getAttrList = () => {
    user.attriButeListApi(route.query.cid, state.listParams).then((res) => {
        state.tableData = res.data.list
        state.total = res.data.total;

    })
}
getAttrList()

const pageSizeChagne = (val: number) => {
    getAttrList();
}

const currentChagne = (val: number) => {
    getAttrList();
}
const delArr = ref<number[]>([])
const delFn1 = (rows:any) => {
    let arr:number[] = []
    arr.push(rows.map((item: any) => {return item.id}))
    delArr.value = arr   
}
const delFn2 = (selection:any) => {
    let arr:number[] = []
    arr.push(selection.map((item: any) => {return item.id}))
    delArr.value = arr  
    
}

// 点击删除
const delFn = (id: any) => {
    const ids = { ids: id }
    ElMessageBox.confirm("是否要删除该品牌", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消"
    }).then(() => {
        user.delattriButeListApi(ids).then((res) => {
            if (res.code === 200) {
                ElMessage.success("删除成功！")
                getAttrList();
            }
        })
    })
}
//  批量删除
const delval = ref('')
const options = [
    {
        value: '删除',
        label: '删除',
    },
]
const delsFn = () => {
    if(delval.value){
        let str = delArr.value.join(",")    
        delFn(str)
        
    }else {
        ElMessage.warning("请选择批量操作类型")
    }
}
let { tableData, listParams, total } = toRefs(state)
</script>

<style lang="less" scoped>
.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}

:deep(.center) {
    text-align: center;
}
.el-table__row {
    .el-button {
        width: 56px;
        height: 28px;
    }
}

.left{
    margin-top: 20px;
    float: left;
    .el-button{
        margin-left: 5px;
    }
}
.el-pagination {
    margin-top: 20px;
    float: right;
}
</style>